import * as echarts from "echarts";

import { ECOption } from "/@/plugins/WyEcharts/index";

const gradientStackedAreaOption: ECOption = {
  color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
  title: {
    text: "Gradient Stacked Area Chart"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"]
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      //false-标签在刻度上,true-标签在两个刻度之间
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    }
  ],
  yAxis: [
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "Line 1",
      type: "line",
      //数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
      stack: "Total",
      //是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(128, 255, 165)"
          },
          {
            offset: 1,
            color: "rgb(1, 191, 236)"
          }
        ])
      },
      emphasis: {
        focus: "series"
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: "Line 2",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(0, 221, 255)"
          },
          {
            offset: 1,
            color: "rgb(77, 119, 255)"
          }
        ])
      },
      emphasis: {
        focus: "series"
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: "Line 3",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(55, 162, 255)"
          },
          {
            offset: 1,
            color: "rgb(116, 21, 219)"
          }
        ])
      },
      emphasis: {
        focus: "series"
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: "Line 4",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 0, 135)"
          },
          {
            offset: 1,
            color: "rgb(135, 0, 157)"
          }
        ])
      },
      emphasis: {
        focus: "series"
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: "Line 5",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: "top"
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgb(255, 191, 0)"
          },
          {
            offset: 1,
            color: "rgb(224, 62, 76)"
          }
        ])
      },
      emphasis: {
        focus: "series"
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};

export default gradientStackedAreaOption;
